<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			button {
				position: absolute;
				left: 200px;
				top: 100px;
				margin: auto;
				width: 120px;
				height: 40px;
				border-radius: 30px;
				color: #fff;
				border-right: 1px solid #f7f7f7;
				border-bottom: 1px solid #eeeeee;
				border-top: 0;
				border-left: 0;
				background-color: #9eeb98;
				box-shadow: 0 1px 10px #9eeb98,
					0 1px 50px #9eeb98,
					0 1px 100px #90e2c0,
					0 1px 120px #90e2c0;
				animation-name: example;
				animation-duration: 4s;
				animation-iteration-count: infinite;
				animation-direction: normal;
			}

			@keyframes example {
				0% {
					background-color: #9eeb98;
					box-shadow: 0 1px 10px #9eeb98,
						0 1px 50px #9eeb98,
						0 1px 100px #90e2c0,
						0 1px 120px #90e2c0;
				}

				25% {
					background-color: #95ebc0;
					box-shadow: 0 1px 10px #95ebc0,
						0 1px 50px #95ebc0,
						0 1px 100px #95ebc0,
						0 1px 120px #95ebc0;
				}

				50% {
					background-color: #a4e4eb;
					box-shadow: 0 1px 10px #a4e4eb,
						0 1px 50px #a4e4eb,
						0 1px 100px #a4e4eb,
						0 1px 120px #a4e4eb;
				}

				75% {
					background-color: #8be4ff;
					box-shadow: 0 1px 10px #8be4ff,
						0 1px 50px #8be4ff,
						0 1px 100px #8be4ff,
						0 1px 120px #8be4ff;
				}

				100% {
					background-color: #9beb9a;
					box-shadow: 0 1px 10px #9beb9a,
						0 1px 50px #9beb9a,
						0 1px 100px #9beb9a,
						0 1px 120px #9beb9a;
				}
			}
		</style>
	</head>

	<body>
		<button>Hello</button>
	</body>
</html>
